<template>
    <div class="">
        <div class="head">
            <div rech="true">
                <h2><span class="hbnh"><a class="fan" @click="$router.go(-1)"></a></span> 银转证 </h2>
            </div>
            <h6  v-if="this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay">¥ {{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
                    $store.state.userInfo.userIndexAmt).toFixed(2)
            }}</h6>

            <h6 v-else-if="!this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay"
            class="account">
            ¥ {{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
                $store.state.userInfo.userFuturesAmt).toFixed(2)
            }}
          </h6>
          <h6 v-else-if="!this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
            class="account">¥ {{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt).toFixed(2) }}</h6>

            <p>当前可用余额</p>
        </div>

        <div class="jine">
            <div class="boxk">
                <p class="cz">充值金额</p>
                <p class="min">最小充值金额为<span>100元</span></p><input placeholder="请输入" type="number" v-model="money"
                    class="inpt">
                <div class="xuank">
                    <a class="" @click="xz(item)" v-for="item in moneyList"
                        :class="(money == Number(item)) ? 'xl' : ''">{{ item }}</a>
                </div>
                <p class="cz" style="margin-top: 0.801rem;">通道密码</p><input placeholder="请输入" type="password"
                    v-model="password" class="inpt">
                <div class="enyt" @click="Recharge()">立即充值</div>


                <!-- <div class="jyzh">
                    <img :src="jyzhimg"/>
                </div> -->
                <p class="czl"> 温馨提示: </p>
                <p class="czl">一、入金时间:工作日09:00-17:00，节假日休息。</p>
                <p class="czl"> 二、感谢您选择我们。为保障您的资金安全， 请确认您转账的是平台实时显示的账户。 请勿相信任何人(包括工作人员)向您私下提供账号转账，
                    非本平台实时显示的银行账号入金的一切损失自负。</p>
            </div>
        </div>
    </div>
</template>
<script>
import * as api from "@/axios/api";
export default {
    name: "recharge",
    data() {
        return {
            money: '',
            password: '',
            moneyList: ['50000', '100000', '300000', '500000'],
            jyzhimg:'',
        };
    },
    mounted() {
        this.getUserInfo()
        this.getjyzh()
    },
    methods: {
        xz(e) {
            this.money = Number(e)
        },
        Recharge() {

            if (this.money == '' || this.money == null || this.money == undefined) {
                this.$toast('请输入充值金额')
                return
            }
            if (this.password == '' || this.password == null || this.password == undefined) {
                this.$toast('请输入通道密码')
                return
            }
            this.setRecharge()
        },
        async setRecharge() {
            let data = {
                amt: this.money,
                payType: 1,
                password: this.password
            }
            let res = await api.inMoney(data)
            if (res.code == 200) {
                this.$toast(res.msg)
                this.$router.go(-1)
            } else {
                this.$toast(res.msg)
            }
        },
        async getUserInfo() {
            // 获取用户信息
            let data = await api.getUserInfo();
            if (data.status === 0) {
                // 判断是否登录
                this.$store.commit('dialogVisible', false);
                this.$store.state.userInfo = data.data;
            } else {
                this.$store.commit('dialogVisible', true);
            }
        },
        async getjyzh() {
            // 获取用户信息
            let data = await api.getPayInfo();
            if (data.status === 0) {
                this.jyzhimg =  data.data[0].channelImg
            } else {

            }
        },
    },
}
</script>
<style scoped>
.head {
    width: 100%;
    height: 6.141rem;
    background: linear-gradient(-55deg, rgb(241, 22, 20), rgb(241, 22, 20));
    text-align: center;
}

.head h2 {
    text-align: center;
    height: 1.2549rem;
    width: 100%;
    position: relative;
    line-height: 1.2549rem;
    font-size: 0.4806rem;
    color: #fff;
    background: transparent;
    font-weight: 500;
    z-index: 3;
}

.hbnh {
    position: absolute;
    left: 0.4005rem;
    font-size: 0.4272rem;
    font-weight: 500;

}

.fan {
    width: 0.2403rem;
    height: 0.4272rem;
    background: url() no-repeat 50%;
    background-size: 100%;
    display: inline-block;
    margin-right: 0.1335rem;
    vertical-align: middle;
    margin-top: -0.0534rem;
}

.xind {
    position: absolute;
    right: 0.4005rem;
    color: #fff;
    font-size: 0.3738rem;
    font-weight: 500;
}

.shaux {
    position: absolute;
    width: 0.4806rem;
    height: 0.4806rem;
    background: url() no-repeat 50%;
    background-size: 100%;
    right: 0.4005rem;
    top: 0.4005rem;
}

.head h6 {
    font-weight: 500;
    font-size: 0.6408rem;
    color: #fff;
    margin-top: 0.9345rem;
}

.head p {
    color: #9fb1ff;
    font-size: 0.3204rem;
    margin-top: 0.3738rem;
}

.jine {
    background: #fff;
    border-radius: 0.4005rem 0.4005rem 0 0;
    min-height: 2.136rem;
    margin-top: -2.0025rem;
    padding-top: 0.534rem;
    position: relative;
    z-index: 9;
}

.boxk {
    width: 9.345rem;
    margin: 0 auto;

}

.cz {
    color: #333;
    font-size: 0.4005rem;
}

.min {
    color: #999;
    font-size: 0.3738rem;
    margin-top: 0.267rem;
}

.min span {
    color: #3b71b9;
}

.boxk input {
    width: 100%;
    height: 1.1748rem;
    background: #e6e6e6;
    border-radius: 0.1335rem;
    margin-top: 0.4005rem;
    padding-left: 0.267rem;
    font-size: 0.4272rem;
    color: #000;
}

.xuank {
    width: 9.345rem;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 0.267rem;
}

.xuank a {
    width: 2.2428rem;
    height: 1.1748rem;
    background: #e6e6e6;
    border-radius: 0.1335rem;
    color: #999;
    font-size: 0.4272rem;
    text-align: center;
    line-height: 1.1748rem;
}

.enyt {
    width: 9.345rem;
    height: 1.1748rem;
    background: linear-gradient(-55deg, rgb(241, 22, 20), rgb(241, 22, 20));
    border-radius: 0.1335rem;
    margin: 0 auto;
    margin-top: 0.5073rem;
    color: #fff;
    font-size: 0.4272rem;
    text-align: center;
    line-height: 1.1748rem;
    margin-bottom: 0.869rem;
}

.czl {
    color: #666;
    font-size: 0.3471rem;
    line-height: 0.5607rem;
}

.xl {
    background: #3b71b9 !important;
    color: #fff !important;
}
.jyzh{
    width: 96%;
    height: auto;
    margin: 0 auto;
    margin-bottom: 0.8rem;
}
.jyzh img{
    width: 100%;
    height: auto;

}
</style>
